import React from 'react';
import { Form, Radio, Row, Col } from 'antd';
import { axconst } from '@/shared/axconst';
import { AxValidator } from '../AxValidator';

const FormItem = Form.Item;
const {
  inlineFormItemLayout,
  inlineFormItemLayoutAllRowTwo,
  inlineFormItemLayoutAllRowThree,
} = axconst;
/**
 * 自定义单选框
 * @param label 标签
 * @param field 字段名称
 * @param value 值
 * @param data 选项数据 [{ value: '1', text: 'Demo' }]
 * @param type 样式（radio | button）默认button
 * @param span span值
 * @param required 是否必填
 * @param hidden 是否隐藏
 */
export function AxRadio(props) {
  const {
    formItemLayoutFromProps = null,
    data = [],
    wholerow,
    hidden,
    label,
    form,
    field,
    value,
    span,
    formItemStyle = { height: 40 }, //系统默认的FormItem高度
    required,
    type = 'button',
    ...rest
  } = props;
  let formItemLayout = {};
  switch (wholerow) {
    case 'two':
      formItemLayout = { ...inlineFormItemLayoutAllRowTwo };
      break;
    case 'three':
      formItemLayout = { ...inlineFormItemLayoutAllRowThree };
      break;
    default:
      formItemLayout = formItemLayoutFromProps
        ? formItemLayoutFromProps
        : { ...inlineFormItemLayout };
      break;
  }
  return hidden ? null : (
    <FormItem {...formItemLayout} label={label} style={formItemStyle}>
      {form.getFieldDecorator(field, {
        initialValue: value,
        rules: [
          {
            label: label,
            required,
            validator: AxValidator,
          },
        ],
      })(
        <Radio.Group style={{ width: '100%' }} buttonStyle="solid" {...rest}>
          <Row>
            {data.map((i, idx) => (
              <Col style={{ overflow: 'hidden' }} key={idx} span={span ? span : 8}>
                {type === 'radio' ? (
                  <Radio value={i.value}>{i.text}</Radio>
                ) : (
                  <Radio.Button style={{ width: '100%', textAlign: 'center' }} value={i.value}>
                    {i.text}
                  </Radio.Button>
                )}
              </Col>
            ))}
          </Row>
        </Radio.Group>,
      )}
    </FormItem>
  );
}
